{% extends 'base.html' %}
{% load static %}

{% block title %}UI组件展示 - 自动化测试平台{% endblock %}
{% block description %}展示自动化测试平台的所有UI组件和交互效果，采用现代设计风格{% endblock %}

{% block extra_css %}
<style>
    /* UI展示页面特定样式，基于Apifox风格优化 */
    .component-section {
        margin-bottom: 4rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--color-border);
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    
    .component-section.visible {
        opacity: 1;
        transform: translateY(0);
    }
    
    .component-section:last-child {
        border-bottom: none;
    }
    
    .component-title {
        display: flex;
        align-items: center;
        margin-bottom: 1.875rem;
        padding-bottom: 0.75rem;
        border-bottom: 3px solid transparent;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        position: relative;
    }
    
    .component-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        border-radius: 3px;
    }
    
    .component-title i {
        margin-right: 0.75rem;
        font-size: 1.5rem;
        color: #667eea;
    }
    
    .component-title h3 {
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0;
    }
    
    .component-preview {
        margin-bottom: 1.5rem;
        padding: 2rem;
        background-color: var(--color-background-light);
        border-radius: var(--radius-lg);
        border: 1px solid var(--color-border);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transition: all var(--transition-md);
        position: relative;
        overflow: hidden;
    }
    
    .component-preview:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }
    
    .component-preview::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
        border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    }
    
    .component-description {
        margin-bottom: 1.5rem;
        color: var(--color-text-secondary);
        font-size: 1rem;
        line-height: 1.6;
        padding-left: 1rem;
        border-left: 3px solid var(--color-primary-light);
    }
    
    .preview-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 1.875rem;
        margin: 1.5rem 0;
    }
    
    /* 卡片展示优化 */
    .preview-grid .card {
        transition: all var(--transition-md);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        position: relative;
    }
    
    .preview-grid .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.15);
    }
    
    /* 表单示例优化 */
    #demoForm {
        max-width: 100%;
    }
    
    .form-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    /* 表格容器优化 */
    .table-container {
        background-color: white;
        border-radius: var(--radius-lg);
        overflow: hidden;
        border: 1px solid var(--color-border);
    }
    
    /* 标签展示优化 */
    .flex-wrap.gap-2 .tag {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        border-radius: 100px;
        transition: all var(--transition-sm);
    }
    
    .flex-wrap.gap-2 .tag:hover {
        transform: scale(1.05);
    }
    
    /* 加载动画容器优化 */
    .flex-col.items-center {
        min-height: 200px;
        justify-content: center;
        align-items: center;
    }
    
    /* 响应式优化 */
    @media (max-width: 768px) {
        .preview-grid {
            grid-template-columns: 1fr;
        }
        
        .form-row {
            grid-template-columns: 1fr;
        }
        
        .component-preview {
            padding: 1.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
    <div class="card">
        <h2 class="text-2xl font-bold mb-6">UI组件展示</h2>
        <p class="text-text-secondary mb-8">此页面展示了所有可用的UI组件及其交互效果，参考了Apifox的现代设计风格。</p>

        <!-- 导航栏组件 -->
        <div class="component-section">
            <h3 class="component-title"><i class="fas fa-project-diagram"></i> 导航栏组件</h3>
            <p class="component-description">响应式导航栏，支持滚动效果和移动端适配。</p>
            <div class="component-preview">
                <nav class="navbar navbar-light bg-white shadow-sm mb-4">
                    <div class="container">
                        <div class="navbar-brand">
                            <i class="fas fa-cubes text-primary mr-2"></i>管理系统
                        </div>
                        <div class="navbar-menu">
                            <a href="#" class="navbar-item active">首页</a>
                            <a href="#" class="navbar-item">功能</a>
                            <a href="#" class="navbar-item">文档</a>
                            <a href="#" class="navbar-item">关于</a>
                        </div>
                        <div class="navbar-actions">
                            <button class="btn btn-sm btn-outline" type="button" id="showNotificationBtn">
                                <i class="fas fa-bell"></i>
                            </button>
                            <div class="dropdown ml-2">
                                <button class="btn btn-sm btn-outline dropdown-toggle" type="button">
                                    <img src="https://picsum.photos/id/1005/32/32" class="rounded-full mr-1" alt="用户头像">
                                    <span>管理员</span>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="#" class="dropdown-item">
                                        <i class="fas fa-user mr-2"></i>个人资料
                                    </a>
                                    <a href="#" class="dropdown-item">
                                        <i class="fas fa-cog mr-2"></i>设置
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a href="#" class="dropdown-item text-danger">
                                        <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </nav>
                <div class="bg-primary/10 p-4 rounded-lg text-sm">
                    <i class="fas fa-info-circle text-primary mr-2"></i>
                    此导航栏支持滚动效果，在页面滚动时会添加阴影和背景变化。点击通知按钮可显示通知示例。
                </div>
            </div>
        </div>

        <!-- 按钮组件 -->
        <div class="component-section">
            <h3 class="component-title"><i class="fas fa-button"></i> 按钮组件</h3>
            <p class="component-description">提供多种类型和尺寸的按钮，支持图标和状态变化。</p>
            <div class="component-preview">
                <div class="flex flex-wrap gap-3 mb-4">
                    <button class="btn btn-primary">主要按钮</button>
                    <button class="btn btn-secondary">次要按钮</button>
                    <button class="btn btn-outline">描边按钮</button>
                    <button class="btn btn-outline-primary">主要描边按钮</button>
                    <button class="btn btn-danger">危险按钮</button>
                    <button class="btn btn-text">文本按钮</button>
                    <button class="btn btn-text-primary">主要文本按钮</button>
                </div>
                <div class="flex flex-wrap gap-3 mb-4">
                    <button class="btn btn-primary btn-sm">小型按钮</button>
                    <button class="btn btn-primary">普通按钮</button>
                    <button class="btn btn-primary btn-lg">大型按钮</button>
                </div>
                <div class="flex flex-wrap gap-3">
                    <button class="btn btn-primary" disabled>禁用按钮</button>
                    <button class="btn btn-primary">
                        <i class="fas fa-search mr-2"></i>搜索
                    </button>
                    <button class="btn btn-danger">
                        <i class="fas fa-trash-alt mr-2"></i>删除
                    </button>
                </div>
            </div>
        </div>

        <!-- 卡片组件 -->
        <div class="component-section">
            <h3 class="component-title"><i class="fas fa-layer-group"></i> 卡片组件</h3>
            <p class="component-description">信息展示卡片，支持头部、内容和底部区域划分。</p>
            <div class="preview-grid">
                <!-- 基础卡片 -->
                <div class="card">
                    <h4 class="card-title">基础卡片</h4>
                    <p class="card-content">这是一个基础的卡片组件，用于展示信息。卡片支持悬停效果和阴影过渡。</p>
                </div>
                
                <!-- 带头部和底部的卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h4>完整卡片</h4>
                        <button class="btn btn-text btn-sm">
                            <i class="fas fa-ellipsis-h"></i>
                        </button>
                    </div>
                    <div class="card-content">
                        <p>包含头部、内容和底部的完整卡片结构，适用于复杂信息展示。</p>
                    </div>
                    <div class="card-footer">
                        <div class="text-sm text-text-tertiary">更新于 2023-10-15</div>
                        <button class="btn btn-primary btn-sm">查看详情</button>
                    </div>
                </div>
                
                <!-- 统计卡片 -->
                <div class="card">
                    <div class="card-header bg-primary/5">
                        <h4 class="text-primary">数据统计</h4>
                    </div>
                    <div class="card-content">
                        <div class="flex items-end justify-between">
                            <div>
                                <div class="text-3xl font-bold">1,245</div>
                                <div class="text-text-tertiary text-sm">总访问量</div>
                            </div>
                            <div class="text-success">
                                <i class="fas fa-arrow-up"></i> 12.5%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 表单组件 -->
        <div class="component-section">
            <h3 class="component-title"><i class="fas fa-edit"></i> 表单组件</h3>
            <p class="component-description">完整的表单控件集合，支持验证、反馈和响应式布局。</p>
            <div class="component-preview">
                <form id="demoForm" class="max-w-2xl">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <input type="text" id="username" name="username" class="form-control" placeholder="请输入用户名" required>
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱</label>
                            <input type="email" id="email" name="email" class="form-control" placeholder="请输入邮箱" required>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" name="password" class="form-control" placeholder="请输入密码" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="confirmPassword">确认密码</label>
                        <input type="password" id="confirmPassword" name="confirmPassword" class="form-control" placeholder="请再次输入密码" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="role">用户角色</label>
                        <select id="role" name="role" class="form-control">
                            <option value="user">普通用户</option>
                            <option value="admin">管理员</option>
                            <option value="editor">编辑</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="description">描述</label>
                        <textarea id="description" name="description" class="form-control" rows="3" placeholder="请输入描述信息"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label class="checkbox">
                            <input type="checkbox" name="terms">
                            我已阅读并同意<a href="#" class="text-primary">服务条款</a>和<a href="#" class="text-primary">隐私政策</a>
                        </label>
                    </div>
                    
                    <div class="form-actions">
                        <button type="reset" class="btn btn-outline">重置</button>
                        <button type="submit" class="btn btn-primary">提交表单</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 表格组件 -->
        <div class="component-section">
            <h3 class="component-title"><i class="fas fa-table"></i> 表格组件</h3>
            <p class="component-description">支持排序、筛选和分页的高级表格组件。</p>
            <div class="component-preview">
                <div class="table-container">
                    <div class="table-toolbar">
                        <div class="flex justify-between items-center">
                            <h4>用户列表</h4>
                            <div class="flex items-center gap-3">
                                <div class="relative">
                                    <input type="text" class="form-control table-search" placeholder="搜索用户...">
                                    <i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary"></i>
                                </div>
                                <button class="btn btn-primary btn-sm" id="openCreateModalBtn">
                                    <i class="fas fa-plus mr-1"></i>新增用户
                                </button>
                            </div>
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th data-sortable="true">ID</th>
                                <th data-sortable="true">用户名</th>
                                <th data-sortable="true">邮箱</th>
                                <th data-sortable="true">角色</th>
                                <th data-sortable="true">创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/1001/32/32" class="rounded-full mr-2" alt="用户头像">
                                        <span>admin</span>
                                    </div>
                                </td>
                                <td>admin@example.com</td>
                                <td><span class="tag tag-primary">管理员</span></td>
                                <td>2023-10-01</td>
                                <td>
                                    <div class="flex gap-1">
                                        <button class="btn btn-text btn-sm" data-toggle="modal" data-target="userDetailModal">
                                            <i class="fas fa-eye text-info"></i>
                                        </button>
                                        <button class="btn btn-text btn-sm">
                                            <i class="fas fa-edit text-primary"></i>
                                        </button>
                                        <button class="btn btn-text btn-sm">
                                            <i class="fas fa-trash-alt text-danger"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/1002/32/32" class="rounded-full mr-2" alt="用户头像">
                                        <span>user1</span>
                                    </div>
                                </td>
                                <td>user1@example.com</td>
                                <td><span class="tag">普通用户</span></td>
                                <td>2023-10-05</td>
                                <td>
                                    <div class="flex gap-1">
                                        <button class="btn btn-text btn-sm" data-toggle="modal" data-target="userDetailModal">
                                            <i class="fas fa-eye text-info"></i>
                                        </button>
                                        <button class="btn btn-text btn-sm">
                                            <i class="fas fa-edit text-primary"></i>
                                        </button>
                                        <button class="btn btn-text btn-sm">
                                            <i class="fas fa-trash-alt text-danger"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>
                                    <div class="flex items-center">
                                        <img src="https://picsum.photos/id/1003/32/32" class="rounded-full mr-2" alt="用户头像">
                                        <span>editor1</span>
                                    </div>
                                </td>
                                <td>editor1@example.com</td>
                                <td><span class="tag tag-secondary">编辑</span></td>
                                <td>2023-10-10</td>
                                <td>
                                    <div class="flex gap-1">
                                        <button class="btn btn-text btn-sm" data-toggle="modal" data-target="userDetailModal">
                                            <i class="fas fa-eye text-info"></i>
                                        </button>
                                        <button class="btn btn-text btn-sm">
                                            <i class="fas fa-edit text-primary"></i>
                                        </button>
                                        <button class="btn btn-text btn-sm">
                                            <i class="fas fa-trash-alt text-danger"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="table-footer">
                        <div class="pagination">
                            <ul>
                                <li class="page-item disabled">
                                    <a class="page-link" href="#"><i class="fas fa-chevron-left"></i></a>
                                </li>
                                <li class="page-item active">
                                    <a class="page-link" href="#">1</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">2</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">3</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 标签和消息组件 -->
        <div class="component-section">
            <h3 class="component-title"><i class="fas fa-tags"></i> 标签和消息组件</h3>
            <p class="component-description">用于分类、状态标识和信息提示的小型组件。</p>
            <div class="component-preview">
                <div class="mb-6">
                    <h4 class="mb-3">标签组件</h4>
                    <div class="flex flex-wrap gap-2">
                        <span class="tag">默认标签</span>
                        <span class="tag tag-primary">主要标签</span>
                        <span class="tag tag-secondary">次要标签</span>
                        <span class="tag tag-success">成功标签</span>
                        <span class="tag tag-error">错误标签</span>
                        <span class="tag tag-warning">警告标签</span>
                        <span class="tag tag-info">信息标签</span>
                        <span class="tag tag-danger">危险标签</span>
                    </div>
                </div>
                
                <div>
                    <h4 class="mb-3">消息组件</h4>
                    <div class="space-y-3">
                        <div class="message">
                            <i class="fas fa-info-circle mr-2"></i>
                            <span>这是一条普通信息提示</span>
                        </div>
                        <div class="message message-success">
                            <i class="fas fa-check-circle mr-2"></i>
                            <span>操作成功完成</span>
                        </div>
                        <div class="message message-error">
                            <i class="fas fa-exclamation-circle mr-2"></i>
                            <span>操作失败，请重试</span>
                        </div>
                        <div class="message message-warning">
                            <i class="fas fa-exclamation-triangle mr-2"></i>
                            <span>请注意，此操作不可逆</span>
                        </div>
                        <div class="message message-info">
                            <i class="fas fa-info-circle mr-2"></i>
                            <span>您有3条未读消息</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 加载动画 -->
        <div class="component-section">
            <h3 class="component-title"><i class="fas fa-spinner"></i> 加载动画</h3>
            <p class="component-description">用于指示加载状态的动画组件。</p>
            <div class="component-preview">
                <div class="flex flex-col items-center justify-center">
                    <div class="loader mb-4"></div>
                    <p class="text-text-secondary">加载中...</p>
                    <button class="btn btn-primary mt-4" id="showLoaderBtn">
                        显示全局加载动画
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
<script type="module">
    // 导入模块化组件
    import { showNotification } from "{% static 'portal/js/modules/notifications.js' %}";
    import { initDropdowns } from "{% static 'portal/js/modules/dropdowns.js' %}";
    import { initModals } from "{% static 'portal/js/modules/modals.js' %}";
    import { initFormValidation } from "{% static 'portal/js/modules/formValidation.js' %}";
    import { initTables } from "{% static 'portal/js/modules/tables.js' %}";
    import { initScrollAnimations, addRippleEffect, showLoadingIndicator, hideLoadingIndicator } from "{% static 'portal/js/modules/animations.js' %}";
    
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化所有模块化组件
        initDropdowns();
        initModals();
        initFormValidation();
        initTables();
        
        // 初始化滚动动画
        initScrollAnimations();
        
        // 表单验证增强
        const demoForm = document.getElementById('demoForm');
        if (demoForm) {
            demoForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 模拟表单提交成功
                setTimeout(() => {
                    showNotification('表单提交成功！', 'success');
                }, 800);
            });
        }
        
        // 显示通知按钮
        const showNotificationBtn = document.getElementById('showNotificationBtn');
        if (showNotificationBtn) {
            // 添加波纹效果
            addRippleEffect(showNotificationBtn);
            showNotificationBtn.addEventListener('click', function() {
                showNotification('您有一条新消息', 'info');
            });
        }
        
        // 显示加载动画按钮
        const showLoaderBtn = document.getElementById('showLoaderBtn');
        if (showLoaderBtn) {
            // 添加波纹效果
            addRippleEffect(showLoaderBtn);
            showLoaderBtn.addEventListener('click', function() {
                // 显示全局加载动画
                showLoadingIndicator('加载中...');
                
                // 3秒后隐藏加载动画
                setTimeout(() => {
                    hideLoadingIndicator();
                    showNotification('加载完成', 'success');
                }, 3000);
            });
        }
        
        // 打开创建用户模态框按钮
        const openCreateModalBtn = document.getElementById('openCreateModalBtn');
        if (openCreateModalBtn) {
            // 添加波纹效果
            addRippleEffect(openCreateModalBtn);
            openCreateModalBtn.addEventListener('click', function() {
                showNotification('此功能正在开发中', 'info');
            });
        }
        
        // 为表格行添加交互效果
        document.querySelectorAll('.table tbody tr').forEach(row => {
            row.addEventListener('mouseenter', function() {
                this.style.backgroundColor = 'rgba(102, 126, 234, 0.05)';
                this.style.transform = 'translateZ(5px)';
                this.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.05)';
                this.style.zIndex = '1';
            });
            
            row.addEventListener('mouseleave', function() {
                this.style.backgroundColor = '';
                this.style.transform = '';
                this.style.boxShadow = '';
                this.style.zIndex = '0';
            });
        });
    });
</script>
{% endblock %}